<template>
  <div class="user page">
    <div class="user_info_panel">
      <UserInfoCard
        :uid="Store.userInfo.uid"
        :nickname="Store.userInfo.unickname"
        :logout="logout"
        description="lorem"
        image-src="/webp_よろしく令和！_74502133.webp"
      />
      <h3 class="tips">我的文章</h3>
      <h3 class="tips">我的图片</h3>
    </div>
    <div class="user_content_panel">
      <div class="user_custom_bg"></div>
      <div style="padding: 32px;display:flex; flex-direction: column;gap: 30px">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam aspernatur deleniti exercitationem illum,
          laudantium magnam mollitia nulla perspiciatis placeat praesentium quae quas qui quia quidem saepe, sequi sint
          voluptate?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam aspernatur deleniti exercitationem illum,
          laudantium magnam mollitia nulla perspiciatis placeat praesentium quae quas qui quia quidem saepe, sequi sint
          voluptate?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam aspernatur deleniti exercitationem illum,
          laudantium magnam mollitia nulla perspiciatis placeat praesentium quae quas qui quia quidem saepe, sequi sint
          voluptate?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam aspernatur deleniti exercitationem illum,
          laudantium magnam mollitia nulla perspiciatis placeat praesentium quae quas qui quia quidem saepe, sequi sint
          voluptate?
        </p>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam aspernatur deleniti exercitationem illum,
          laudantium magnam mollitia nulla perspiciatis placeat praesentium quae quas qui quia quidem saepe, sequi sint
          voluptate?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam aspernatur deleniti exercitationem illum,
          laudantium magnam mollitia nulla perspiciatis placeat praesentium quae quas qui quia quidem saepe, sequi sint
          voluptate?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam aspernatur deleniti exercitationem illum,
          laudantium magnam mollitia nulla perspiciatis placeat praesentium quae quas qui quia quidem saepe, sequi sint
          voluptate?
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { inject } from 'vue';
import store from '../store'
import UserInfoCard from "../components/UserInfoCard.vue";
import { useRouter } from 'vue-router';
import { apis } from '../api';

export default {
  components: { UserInfoCard },
  beforeRouteEnter(to, from, next) {
    apis.checkLogin(next, {
      title: "尚未登录，请登录",
      icon: to.meta.icon,
      showDuration: 5000,
    })
  },
  setup() {
    const Store = inject('store', store)
    const router = useRouter()
    const logout = () => {
      Store.token = ""
      router.push("/login")
    }

    return { Store, logout }
  }
}
</script>

<style scoped lang="less">
.user {
  display: flex;
  min-height: 100vh;
  position: relative;

  & > .user_info_panel {
    width: 40%;
    height: 100%;
    padding: 40px 32px;
    min-width: 350px;
    background-color: rgba(255, 255, 255, 0.01);

    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .user_content_panel {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}

.user_custom_bg {
  width: 100%;
  min-height: 42.5vh;
  background-size: cover;
  background-position: center;
  background-image: url("/webp_2021110517372312.webp");
}
</style>